<script setup lang="ts">
const props = defineProps({
  itemData: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<template>
  <div class="evaluation-item">
    <div class="user">
      <img
        v-if="props.itemData.buyerProfile"
        class="user-head"
        :src="props.itemData.buyerProfile"
        alt=""
      />
      <img v-else class="user-head" src="@/assets/logo-small.png" alt="" />
      <div class="name-work">
        <p class="name-info">
          <span class="name">{{ props.itemData.buyerNickName || "" }}</span>
          <span class="comp">{{ props.itemData.buyerCompany || "" }}</span>
        </p>
        <p class="rate">
          <el-rate
            style="height: 18px; overflow: hidden"
            v-model="props.itemData.score"
            allow-half
            void-color="rgba(25, 30, 40, 0.12)"
            disabled
            :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
          />
          <span class="rate-num">{{ props.itemData.score }}</span>
          <span class="time">{{ props.itemData.commentTime }}</span>
        </p>
      </div>
    </div>
    <p>{{ props.itemData.comment }}</p>
    <div
      class="imgs"
      v-if="props.itemData.commentPics && props.itemData.commentPics.length"
    >
      <el-image
        v-for="item of props.itemData.commentPics"
        style="width: 80px; height: 80px; margin-right: 10px; border-radius: 4px"
        :src="item"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="props.itemData.commentPics"
        :initial-index="4"
        fit="cover"
      />
    </div>
    <p class="slect-service">
      {{ props.itemData.goodsName || "--" }}
    </p>
  </div>
</template>

<style scoped lang="scss">
.evaluation-item {
  flex: 1;
  padding: 24px 0;
  border-bottom: 1px solid rgba(237, 237, 238, 1);
  &:last-child {
    border-bottom: none;
  }
  .user {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .user-head {
      width: 50px;
      height: 50px;
      flex: 0 0 50px;
      margin-right: 12px;
      background: #007aff;
      color: #fff;
      border-radius: 50%;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    .name-info {
      display: flex;
      align-items: center;
      margin-bottom: 2px;
      .name {
        color: #191e28;
        font-size: 16px;
        font-weight: bold;
        margin-right: 8px;
        padding-top: 2px;
      }
      .comp {
        color: rgba(25, 30, 40, 0.48);
        font-size: 16px;
      }
      .orders {
        font-size: 12px;
        color: #1dbf73;
        margin-left: 8px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #1dbf73;
        padding: 3px 7px;
      }
    }
    .rate {
      display: flex;
      align-items: center;
      .rate-num {
        color: #191e28;
        margin-right: 8px;
        padding-right: 8px;
        line-height: 14px;
        border-right: 1px solid rgba(25, 30, 40, 0.08);
      }
      .time {
        color: rgba(25, 30, 40, 0.48);
      }
    }
  }
  .imgs {
    margin: 18px 12px 8px 0;
  }
  .slect-service {
    border-radius: 6px 6px 6px 6px;
    font-size: 13px;
    color: rgba(25, 30, 40, 0.48);
  }
}
</style>
